<template>
  <div class="space-y-8">
    <div class="space-y-4">
      <h3 class="text-lg font-semibold">插槽自定义示例</h3>

      <!-- 完全自定义主内容 -->
      <div class="space-y-4">
        <h4 class="text-md font-medium">完全自定义主内容</h4>
        <CommentItem :comment="comment">
          <template #main-content="{ comment, handlers, classes }">
            <div
              class="custom-main-content bg-gradient-to-r from-blue-500 to-purple-600 text-white p-6 rounded-xl"
            >
              <div class="flex items-center gap-4 mb-4">
                <div class="w-16 h-16 rounded-full overflow-hidden border-4 border-white/30">
                  <img
                    :src="comment.author.avatar"
                    :alt="comment.author.name"
                    class="w-full h-full object-cover"
                  />
                </div>
                <div>
                  <h4 class="text-xl font-bold">{{ comment.author.name }}</h4>
                  <p class="text-blue-100">{{ formatCustomTime(comment.createdAt) }}</p>
                </div>
              </div>
              <div class="prose prose-invert max-w-none mb-4">
                <div v-html="comment.content"></div>
              </div>
              <div class="flex items-center gap-6">
                <button
                  @click="handlers.toggleLike"
                  class="flex items-center gap-2 px-4 py-2 bg-white/20 rounded-lg hover:bg-white/30 transition-colors"
                >
                  <span class="text-2xl">{{ comment.isLiked ? '❤️' : '🤍' }}</span>
                  <span>{{ comment.likes }}</span>
                </button>
                <button
                  @click="handlers.startReply"
                  class="px-4 py-2 bg-white/20 rounded-lg hover:bg-white/30 transition-colors"
                >
                  回复
                </button>
              </div>
            </div>
          </template>
        </CommentItem>
      </div>

      <!-- 自定义头像 -->
      <div class="space-y-4">
        <h4 class="text-md font-medium">自定义头像</h4>
        <CommentItem :comment="comment">
          <template #avatar="{ author, sizeClass }">
            <div :class="['custom-avatar', sizeClass]" @click="handleAvatarClick(author)">
              <div class="relative">
                <img
                  :src="author.avatar"
                  :alt="author.name"
                  class="w-full h-full object-cover rounded-full border-4 border-primary"
                />
                <div
                  class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white flex items-center justify-center"
                >
                  <span class="text-xs">✓</span>
                </div>
              </div>
            </div>
          </template>
        </CommentItem>
      </div>

      <!-- 自定义作者信息 -->
      <div class="space-y-4">
        <h4 class="text-md font-medium">自定义作者信息</h4>
        <CommentItem :comment="comment">
          <template #author="{ author }">
            <div class="flex items-center gap-2">
              <h4 class="font-bold text-lg text-primary">{{ author.name }}</h4>
              <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">VIP</span>
              <span class="px-2 py-1 bg-secondary/10 text-secondary text-xs rounded-full"
                >认证用户</span
              >
            </div>
          </template>
          <template #badge="{ author }">
            <div class="flex gap-1">
              <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full"
                >🏆 活跃用户</span
              >
              <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full"
                >📝 内容创作者</span
              >
            </div>
          </template>
        </CommentItem>
      </div>

      <!-- 自定义时间戳 -->
      <div class="space-y-4">
        <h4 class="text-md font-medium">自定义时间戳</h4>
        <CommentItem :comment="comment">
          <template #timestamp="{ timestamp, formattedTime }">
            <div class="flex items-center gap-2 text-sm text-base-content/60">
              <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
              <time>{{ formattedTime }}</time>
              <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">在线</span>
            </div>
          </template>
        </CommentItem>
      </div>

      <!-- 自定义内容 -->
      <div class="space-y-4">
        <h4 class="text-md font-medium">自定义内容</h4>
        <CommentItem :comment="comment">
          <template #content="{ content, comment }">
            <div
              class="custom-content bg-gradient-to-r from-gray-50 to-gray-100 p-4 rounded-lg border-l-4 border-primary"
            >
              <div class="flex items-start gap-3">
                <div
                  class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0"
                >
                  <span class="text-primary font-bold">💬</span>
                </div>
                <div class="flex-1">
                  <div v-html="content" class="prose prose-sm max-w-none"></div>
                  <div class="mt-2 flex items-center gap-2 text-xs text-base-content/60">
                    <span>📊 阅读量: 1.2k</span>
                    <span>🔗 分享: 15</span>
                    <span>⭐ 评分: 4.8</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </CommentItem>
      </div>

      <!-- 自定义操作按钮 -->
      <div class="space-y-4">
        <h4 class="text-md font-medium">自定义操作按钮</h4>
        <CommentItem :comment="comment">
          <template #actions="{ comment, handlers }">
            <div class="flex items-center gap-4">
              <button
                @click="handlers.toggleLike"
                class="flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-200"
                :class="
                  comment.isLiked
                    ? 'bg-red-100 text-red-600'
                    : 'bg-gray-100 text-gray-600 hover:bg-red-50'
                "
              >
                <span class="text-lg">{{ comment.isLiked ? '❤️' : '🤍' }}</span>
                <span class="font-medium">{{ comment.likes }}</span>
              </button>
              <button
                @click="handlers.startReply"
                class="flex items-center gap-2 px-3 py-2 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200 transition-colors"
              >
                <span>💬</span>
                <span>回复</span>
              </button>
              <button
                class="flex items-center gap-2 px-3 py-2 bg-green-100 text-green-600 rounded-lg hover:bg-green-200 transition-colors"
              >
                <span>📤</span>
                <span>分享</span>
              </button>
              <button
                class="flex items-center gap-2 px-3 py-2 bg-yellow-100 text-yellow-600 rounded-lg hover:bg-yellow-200 transition-colors"
              >
                <span>⭐</span>
                <span>收藏</span>
              </button>
            </div>
          </template>
        </CommentItem>
      </div>

      <!-- 自定义更多操作 -->
      <div class="space-y-4">
        <h4 class="text-md font-medium">自定义更多操作</h4>
        <CommentItem :comment="comment">
          <template #more-actions="{ comment, showMore, onToggle, onReport, onDelete }">
            <div class="relative">
              <button
                @click="onToggle"
                class="p-2 rounded-full hover:bg-base-300/50 transition-colors"
              >
                <span class="text-xl">⚙️</span>
              </button>
              <div
                v-if="showMore"
                class="absolute right-0 top-12 bg-white rounded-xl shadow-lg border py-2 z-10 min-w-[160px]"
              >
                <button
                  class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2"
                >
                  <span>📝</span>
                  编辑
                </button>
                <button
                  class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2"
                >
                  <span>📋</span>
                  复制链接
                </button>
                <button
                  class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2"
                >
                  <span>🔔</span>
                  关注作者
                </button>
                <hr class="my-1" />
                <button
                  @click="onReport"
                  class="w-full px-4 py-2 text-sm text-orange-600 hover:bg-orange-50 flex items-center gap-2"
                >
                  <span>🚨</span>
                  举报
                </button>
                <button
                  @click="onDelete"
                  class="w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50 flex items-center gap-2"
                >
                  <span>🗑️</span>
                  删除
                </button>
              </div>
            </div>
          </template>
        </CommentItem>
      </div>

      <!-- 自定义回复表单 -->
      <div class="space-y-4">
        <h4 class="text-md font-medium">自定义回复表单</h4>
        <CommentItem :comment="comment">
          <template #reply-form="{ comment, submitting, onSubmit, onCancel }">
            <div
              class="mt-4 p-6 bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl border border-blue-200"
            >
              <div class="space-y-4">
                <div class="flex items-center gap-2 text-sm text-blue-600">
                  <span>💬</span>
                  <span>回复 @{{ comment.author.name }}</span>
                </div>
                <textarea
                  v-model="localReplyContent"
                  placeholder="写下你的回复..."
                  class="w-full p-4 bg-white rounded-lg border border-blue-200 focus:border-blue-400 focus:outline-none resize-none shadow-sm"
                  rows="4"
                ></textarea>
                <div class="flex justify-between items-center">
                  <div class="flex items-center gap-2 text-sm text-gray-500">
                    <span>支持 Markdown 格式</span>
                    <span>•</span>
                    <span>最多 500 字</span>
                  </div>
                  <div class="flex gap-2">
                    <button
                      @click="onCancel"
                      class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
                    >
                      取消
                    </button>
                    <button
                      @click="onSubmit(localReplyContent)"
                      :disabled="!localReplyContent.trim() || submitting"
                      class="px-6 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                    >
                      {{ submitting ? '发送中...' : '发送回复' }}
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </CommentItem>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CommentItem } from '@/components/common/comment'

// 本地回复内容
const localReplyContent = ref('')

// 示例评论数据
const comment = {
  id: '1',
  content: '这是一个展示插槽自定义功能的评论组件示例。通过插槽，你可以完全自定义组件的各个部分。',
  author: {
    id: '1',
    name: '张三',
    avatar:
      'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face',
  },
  createdAt: '2024-01-15T10:30:00Z',
  likes: 25,
  isLiked: true,
  replyCount: 5,
}

// 自定义时间格式化
const formatCustomTime = (dateString: string): string => {
  const date = new Date(dateString)
  const now = new Date()
  const diff = now.getTime() - date.getTime()

  const minutes = Math.floor(diff / 60000)
  const hours = Math.floor(diff / 3600000)
  const days = Math.floor(diff / 86400000)

  if (minutes < 1) return '刚刚发布'
  if (minutes < 60) return `${minutes}分钟前发布`
  if (hours < 24) return `${hours}小时前发布`
  if (days < 7) return `${days}天前发布`

  return date.toLocaleDateString('zh-CN') + ' 发布'
}

// 头像点击处理
const handleAvatarClick = (author: any) => {
  console.log('点击头像:', author)
}
</script>

<style scoped>
.custom-avatar {
  @apply w-12 h-12 cursor-pointer;
}

.custom-main-content {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.custom-content {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
</style>
